<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档管理系统 - 主页</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        /* 背景图片样式 */
        body {
            position: relative;
            background-color: #2d2d2d;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            background-image: var(--bg-image);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        
        /* 背景覆盖层 */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-color: rgba(0, 0, 0, var(--bg-opacity, 0.3));
        }
        
        /* 分类导航样式 - 科技风格 */
        .category-nav {
            background: transparent;
            border-radius: 0;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: none;
            position: relative;
            overflow: hidden;
            border: none;
            animation: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        
        .category-nav::before {
            display: none;
        }
        
        .category-nav h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.95);
            font-size: 18px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
            position: relative;
            display: inline-block;
            z-index: 1;
        }
        
        .category-nav h3::after {
            display: none;
        }
        
        .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            position: relative;
            z-index: 1;
        }
        
        .category-link {
            display: inline-block;
            padding: 8px 16px;
            background: rgba(0, 0, 0, 0.2);
            border: none;
            border-radius: 30px;
            color: rgba(255, 255, 255, 0.95);
            text-decoration: none;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        }
        
        .category-link::before {
            display: none;
        }
        
        .category-link:hover {
            transform: none;
            background: rgba(0, 0, 0, 0.3);
            border: none;
            color: #ffffff;
            box-shadow: none;
        }
        
        .category-link.active {
            background: rgba(0, 0, 0, 0.3);
            color: white;
            border: none;
            box-shadow: none;
            animation: none;
        }
        
        .category-link span {
            position: relative;
            z-index: 1;
        }
        
        .category-link .count {
            display: inline-block;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 0 6px;
            margin-left: 5px;
            font-size: 0.85em;
            transition: all 0.3s;
        }
        
        .category-link:hover .count {
            background: rgba(0, 120, 255, 0.4);
            box-shadow: 0 0 5px rgba(0, 150, 255, 0.5);
        }
        
        /* 当前分类标题科技风格 */
        .current-category {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.95);
            margin-bottom: 25px;
            padding: 10px 0;
            background: transparent;
            border-left: none;
            border-radius: 0;
            box-shadow: none;
            animation: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        }
        
        .current-category span {
            font-weight: bold;
            color: rgba(255, 255, 255, 0.95);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
            animation: none;
        }
        
        /* 科幻小游戏区域 */
        .sci-fi-game-container {
            position: relative;
            margin-top: 40px;
            margin-bottom: 30px;
            border-radius: 0;
            overflow: hidden;
            box-shadow: none;
            border: none;
            height: 300px;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            z-index: 1;
        }
        
        /* 游戏容器背景覆盖层 */
        .sci-fi-game-container::before {
            content: none;
        }
        
        /* 游戏容器内容层 */
        .sci-fi-game-container > * {
            position: relative;
            z-index: 2;
        }
        
        .game-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.95);
            font-size: 18px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
            z-index: 10;
            background: rgba(0, 0, 0, 0.2);
            padding: 8px 20px;
            border-radius: 20px;
            border: none;
            pointer-events: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        
        .game-subtitle {
            position: absolute;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.95);
            font-size: 14px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
            z-index: 10;
            pointer-events: none;
            opacity: 0.9;
            text-align: center;
            width: 80%;
            background: transparent;
            padding: 6px 10px;
            border-radius: 0;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
        }
        
        #particleCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
        }
        
        .game-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.2);
            padding: 10px 20px;
            border-radius: 25px;
            border: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
        }
        
        .game-btn {
            background: rgba(0, 0, 0, 0.2);
            border: none;
            color: rgba(255, 255, 255, 0.95);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            outline: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        }
        
        .game-btn:hover {
            background: rgba(0, 0, 0, 0.3);
        }
        
        .game-btn:active {
            transform: translateY(1px);
        }
        
        .game-stats {
            position: absolute;
            top: 20px;
            right: 20px;
            color: rgba(255, 255, 255, 0.95);
            font-size: 14px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
            z-index: 10;
            background: rgba(0, 0, 0, 0.2);
            padding: 8px 15px;
            border-radius: 10px;
            border: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
        }
        
        /* 添加动画效果 */
        @keyframes categoryNavGlow {
            0% { box-shadow: 0 5px 20px rgba(0, 120, 255, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.1); }
            100% { box-shadow: 0 5px 30px rgba(0, 150, 255, 0.4), inset 0 1px 5px rgba(255, 255, 255, 0.2); }
        }
        
        @keyframes categoryNavBg {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes categoryTitleLine {
            0% { background-position: -100% 0; }
            100% { background-position: 200% 0; }
        }
        
        @keyframes activeGlow {
            0% { box-shadow: 0 5px 15px rgba(0, 150, 255, 0.4), 0 0 10px rgba(0, 200, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.5); }
            100% { box-shadow: 0 5px 25px rgba(0, 180, 255, 0.6), 0 0 15px rgba(0, 230, 255, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.7); }
        }
        
        @keyframes currentCategoryPulse {
            0% { background: rgba(0, 20, 50, 0.3); }
            100% { background: rgba(0, 30, 70, 0.4); }
        }
        
        @keyframes categoryNameGlow {
            0% { text-shadow: 0 0 10px rgba(0, 150, 255, 0.5); color: #00b2ff; }
            100% { text-shadow: 0 0 20px rgba(0, 200, 255, 0.8); color: #40d0ff; }
        }
        
        /* 保留原有的其他样式 */
        /* 文档卡片中分类标签样式 */
        .document-category {
            display: inline-block;
            padding: 3px 8px;
            background: rgba(33, 150, 243, 0.15);
            color: rgba(220, 240, 255, 0.95);
            border-radius: 4px;
            font-size: 12px;
            margin-right: 5px;
            border: 1px solid rgba(30, 140, 255, 0.2);
            backdrop-filter: blur(1px);
            -webkit-backdrop-filter: blur(1px);
        }
        
        /* 文档卡片图片样式 */
        .document-image {
            width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin: 10px 0;
            border: 1px solid rgba(30, 140, 255, 0.3);
            box-shadow: 0 2px 8px rgba(0, 120, 255, 0.2);
        }
        
        /* 整体容器样式 */
        .container {
            background: transparent;
        }
        
        .welcome-section {
            background: rgba(0, 10, 30, 0.05);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
            border: 1px solid rgba(30, 140, 255, 0.15);
            backdrop-filter: blur(1px);
            -webkit-backdrop-filter: blur(1px);
        }
        
        .welcome-section h2 {
            color: rgba(220, 240, 255, 0.95);
            text-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
        }
        
        .welcome-section p {
            color: rgba(220, 240, 255, 0.9);
            text-shadow: 0 0 8px rgba(0, 120, 255, 0.4);
        }
        
        /* 文档列表区域 */
        .documents-section {
            background: transparent;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
            border: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        
        .documents-section h2 {
            color: rgba(240, 250, 255, 0.95);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
            margin-bottom: 20px;
        }
        
        .documents-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        /* 文档卡片样式 */
        .document-card {
            background: transparent;
            border-radius: 10px;
            padding: 15px 5px;
            border: none;
            transition: all 0.3s;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            margin-bottom: 10px;
        }
        
        .document-card:hover {
            transform: none;
            box-shadow: none;
            border: none;
            background: transparent;
        }
        
        .document-card h3 {
            color: rgba(240, 250, 255, 0.98);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 120, 255, 0.6);
            margin-bottom: 5px;
        }
        
        .document-card p {
            color: rgba(240, 250, 255, 0.95);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        }
        
        /* 文档卡片图片样式 */
        .document-image {
            width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin: 10px 0;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        /* 文档卡片中分类标签样式 */
        .document-category {
            display: inline-block;
            padding: 3px 8px;
            background: rgba(0, 100, 200, 0.3);
            color: rgba(240, 250, 255, 0.95);
            border-radius: 4px;
            font-size: 12px;
            margin-right: 5px;
            border: none;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        
        .document-meta {
            margin-bottom: 8px;
            color: rgba(200, 230, 255, 0.85);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        }
        
        .btn-primary {
            background: rgba(0, 0, 0, 0.2);
            border: none;
            color: rgba(240, 250, 255, 0.95);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            outline: none;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
            text-decoration: none;
            display: inline-block;
            margin-top: 8px;
        }
        
        .btn-primary:hover {
            background: rgba(0, 0, 0, 0.3);
        }
        
        /* 页眉和页脚透明化 */
        .main-header, .main-footer {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
        }
        
        /* 页面整体背景透明度调整 */
        body::after {
            background-color: rgba(0, 0, 0, 0);
        }
        
        /* 在内容周围添加文字阴影 */
        .documents-section h2,
        .category-nav h3,
        .document-card h3,
        .document-card p,
        .document-meta,
        .document-category,
        .main-header h1,
        .nav-links a,
        .main-footer p {
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        }
        
        /* 导航链接样式 */
        .nav-links a {
            background: transparent;
            border: none;
        }
        
        /* 按钮样式 */
        .btn-primary {
            background: rgba(0, 0, 0, 0.2);
            border: none;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        }
        
        .btn-primary:hover {
            background: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body th:style="${backgroundImage != '' ? '--bg-image: url(' + backgroundImage + '); --bg-opacity: ' + backgroundOpacity : '--bg-opacity: ' + backgroundOpacity}">
    <header class="main-header">
        <div class="container">
            <nav>
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/weblinks">网站导航</a></li>
                    <li><a href="/danmaku-display">弹幕墙</a></li>
                    <li><a href="/chat-room">聊天室</a></li>
                    <li><a href="/ai-assistant">AI助手</a></li>
                    <li><a href="/dashboard" th:if="${#authorization.expression('isAuthenticated()')}">控制台</a></li>
                    <li><a href="/login" th:if="${#authorization.expression('!isAuthenticated()')}">登录</a></li>
                    <li><a href="/register" th:if="${#authorization.expression('!isAuthenticated()')}">注册</a></li>
                    <li><a href="/logout" th:if="${#authorization.expression('isAuthenticated()')}">退出</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <!-- 分类导航 -->
        <section class="category-nav">
            <h3>文档分类</h3>
            <div class="category-list">
                <a href="/" class="category-link" th:classappend="${selectedCategory == null ? 'active' : ''}">全部文档</a>
                <a th:each="category : ${categories}" 
                   th:href="@{/(categoryId=${category.id})}" 
                   class="category-link"
                   th:classappend="${selectedCategory != null && selectedCategory.id == category.id ? 'active' : ''}">
                    <span th:text="${category.name}">分类名称</span>
                    <span th:text="${'(' + category.documents.size() + ')'}" class="count"></span>
                </a>
            </div>
        </section>
        
        <!-- 当前分类提示 -->
        <div class="current-category" th:if="${selectedCategory != null}">
            当前分类: <span th:text="${selectedCategory.name}">分类名称</span>
        </div>

        <section class="documents-section">
            <h2>文档列表</h2>
            <div class="documents-grid">
                <div th:if="${documents.empty}" class="no-documents">
                    <p th:if="${selectedCategory != null}">该分类下暂无文档</p>
                    <p th:unless="${selectedCategory != null}">暂无文档</p>
                </div>
                <div th:each="doc : ${documents}" class="document-card">
                    <h3 th:text="${doc.title}">文档标题</h3>
                    <div class="document-meta">
                        <span th:if="${doc.category != null}" class="document-category" th:text="${doc.category.name}">分类</span>
                        <span th:text="${#temporals.format(doc.createdAt, 'yyyy-MM-dd HH:mm')}">发布时间</span>
                    </div>
                    <p th:text="${#strings.abbreviate(doc.content, 150)}">文档内容...</p>
                    <img th:if="${doc.imagePath != null}" th:src="${doc.imagePath}" alt="文档图片" class="document-image">
                    <a th:href="@{'/documents/' + ${doc.id}}" class="btn btn-primary">阅读全文</a>
                </div>
            </div>
        </section>
        
        <!-- 科幻小游戏 -->
        <div class="sci-fi-game-container">
            <canvas id="particleCanvas"></canvas>
        </div>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 文档管理系统. 保留所有权利.</p>
        </div>
    </footer>

    <script src="/js/script.js"></script>
    
    <!-- 粒子系统小游戏脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('particleCanvas');
            const ctx = canvas.getContext('2d');
            
            // 设置画布大小
            function resizeCanvas() {
                const container = canvas.parentElement;
                canvas.width = container.clientWidth;
                canvas.height = container.clientHeight;
            }
            
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 创建粒子系统
            let particles = [];
            let attractors = [];
            let maxParticles = 150;
            let colorMode = 0;  // 0: 蓝色系, 1: 多彩, 2: 科幻绿色
            let useGravity = true;
            let lastTime = 0;
            let frameCount = 0;
            let lastColorChange = 0;
            let lastReset = 0;
            let attractorChangeInterval = 5000; // 5秒改变一次引力中心
            let colorChangeInterval = 10000;    // 10秒改变一次颜色模式
            
            // 颜色模式
            const colorSchemes = [
                // 蓝色系
                {
                    getColor: (velocity) => {
                        const speed = Math.min(10, Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y));
                        const hue = 210; // 蓝色
                        const saturation = Math.min(100, 50 + speed * 5);
                        const lightness = Math.min(90, 40 + speed * 5);
                        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
                    },
                    background: 'rgba(0, 0, 0, 0.0)'
                },
                // 多彩
                {
                    getColor: (velocity) => {
                        const speed = Math.min(10, Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y));
                        const hue = (Math.atan2(velocity.y, velocity.x) * 180 / Math.PI + 360) % 360;
                        const saturation = Math.min(100, 70 + speed * 3);
                        const lightness = Math.min(70, 40 + speed * 3);
                        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
                    },
                    background: 'rgba(0, 0, 0, 0.0)'
                },
                // 科幻绿色
                {
                    getColor: (velocity) => {
                        const speed = Math.min(10, Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y));
                        const hue = 120; // 绿色
                        const saturation = Math.min(100, 50 + speed * 5);
                        const lightness = Math.min(70, 30 + speed * 4);
                        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
                    },
                    background: 'rgba(0, 0, 0, 0.0)'
                }
            ];
            
            class Particle {
                constructor(x, y) {
                    this.x = x;
                    this.y = y;
                    this.size = Math.random() * 3 + 1;
                    this.vx = (Math.random() - 0.5) * 2;
                    this.vy = (Math.random() - 0.5) * 2;
                    this.ax = 0;
                    this.ay = 0;
                    this.life = Math.random() * 0.5 + 0.5; // 生命值 0-1
                    this.decay = Math.random() * 0.01 + 0.003; // 每帧减少的生命值
                }
                
                update() {
                    // 更新加速度
                    this.ax = 0;
                    this.ay = 0;
                    
                    // 应用引力吸引
                    if (useGravity) {
                        for (const attractor of attractors) {
                            const dx = attractor.x - this.x;
                            const dy = attractor.y - this.y;
                            const distSq = dx * dx + dy * dy;
                            const dist = Math.sqrt(distSq);
                            
                            if (dist > 5) {
                                const force = attractor.strength / distSq;
                                this.ax += dx / dist * force;
                                this.ay += dy / dist * force;
                            }
                        }
                    }
                    
                    // 添加一点随机运动
                    this.ax += (Math.random() - 0.5) * 0.05;
                    this.ay += (Math.random() - 0.5) * 0.05;
                    
                    // 更新速度
                    this.vx += this.ax;
                    this.vy += this.ay;
                    
                    // 限制最大速度
                    const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
                    if (speed > 5) {
                        this.vx = (this.vx / speed) * 5;
                        this.vy = (this.vy / speed) * 5;
                    }
                    
                    // 更新位置
                    this.x += this.vx;
                    this.y += this.vy;
                    
                    // 边界检查 - 弹回
                    if (this.x < 0 || this.x > canvas.width) {
                        this.vx *= -0.8;
                        this.x = Math.max(0, Math.min(canvas.width, this.x));
                    }
                    if (this.y < 0 || this.y > canvas.height) {
                        this.vy *= -0.8;
                        this.y = Math.max(0, Math.min(canvas.height, this.y));
                    }
                    
                    // 减少生命值
                    this.life -= this.decay;
                    
                    // 更新大小
                    this.size = Math.max(0.5, this.life * 4);
                }
                
                draw() {
                    const alpha = Math.min(1, this.life * 2);
                    ctx.globalAlpha = alpha;
                    
                    // 根据颜色模式获取颜色
                    ctx.fillStyle = colorSchemes[colorMode].getColor({x: this.vx, y: this.vy});
                    
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                    
                    // 画速度向量
                    if (this.size > 2) {
                        ctx.beginPath();
                        ctx.moveTo(this.x, this.y);
                        ctx.lineTo(this.x + this.vx * 3, this.y + this.vy * 3);
                        ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
                        ctx.lineWidth = 0.5;
                        ctx.stroke();
                    }
                    
                    ctx.globalAlpha = 1;
                }
                
                isDead() {
                    return this.life <= 0;
                }
            }
            
            class Attractor {
                constructor(x, y, strength = 0.5) {
                    this.x = x;
                    this.y = y;
                    this.strength = strength;
                    this.radius = 20;
                    this.pulseAngle = 0;
                }
                
                update() {
                    this.pulseAngle += 0.05;
                    this.radius = 15 + Math.sin(this.pulseAngle) * 5;
                }
                
                draw() {
                    // 仅保留引力影响，不绘制视觉效果
                }
            }
            
            // 初始化粒子
            function initParticles() {
                particles = [];
                for (let i = 0; i < maxParticles; i++) {
                    particles.push(new Particle(
                        Math.random() * canvas.width,
                        Math.random() * canvas.height
                    ));
                }
                
                // 添加一个初始引力源
                attractors = [];
                attractors.push(new Attractor(canvas.width/2, canvas.height/2, 1));
            }
            
            // 自动更新引力源位置
            function updateAttractors() {
                attractors = [];
                
                // 添加1-3个随机位置的引力源
                const numAttractors = Math.floor(Math.random() * 3) + 1;
                for(let i = 0; i < numAttractors; i++) {
                    const x = Math.random() * canvas.width;
                    const y = Math.random() * canvas.height;
                    const strength = Math.random() * 0.5 + 0.5;
                    attractors.push(new Attractor(x, y, strength));
                }
            }
            
            // 鼠标交互 - 保留但不显示视觉效果
            let mouseX = 0, mouseY = 0;
            
            canvas.addEventListener('mousemove', function(e) {
                const rect = canvas.getBoundingClientRect();
                mouseX = e.clientX - rect.left;
                mouseY = e.clientY - rect.top;
                
                // 在鼠标位置生成新粒子
                if (Math.random() < 0.3 && particles.length < maxParticles) {
                    particles.push(new Particle(
                        mouseX + (Math.random() - 0.5) * 20,
                        mouseY + (Math.random() - 0.5) * 20
                    ));
                }
            });
            
            // 动画循环
            function animate(timestamp) {
                // 计算时间差
                if (!lastTime) lastTime = timestamp;
                const deltaTime = timestamp - lastTime;
                lastTime = timestamp;
                
                frameCount++;
                
                // 自动改变颜色模式
                if (timestamp - lastColorChange > colorChangeInterval) {
                    colorMode = (colorMode + 1) % colorSchemes.length;
                    lastColorChange = timestamp;
                }
                
                // 自动更新引力源
                if (timestamp - lastReset > attractorChangeInterval) {
                    updateAttractors();
                    lastReset = timestamp;
                }
                
                // 清空画布 - 使用完全透明的背景
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制背景 - 完全透明
                ctx.fillStyle = colorSchemes[colorMode].background;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 更新和绘制粒子
                for (let i = particles.length - 1; i >= 0; i--) {
                    particles[i].update();
                    particles[i].draw();
                    
                    // 删除死亡粒子
                    if (particles[i].isDead()) {
                        particles.splice(i, 1);
                    }
                }
                
                // 更新引力源 (不绘制)
                for (const attractor of attractors) {
                    attractor.update();
                }
                
                // 添加新粒子
                if (particles.length < maxParticles && Math.random() < 0.1) {
                    particles.push(new Particle(
                        Math.random() * canvas.width,
                        Math.random() * canvas.height
                    ));
                }
                
                requestAnimationFrame(animate);
            }
            
            // 初始化并开始动画
            initParticles();
            animate(0);
        });
    </script>
</body>
</html> 